<template>
    <div class="p-5">
        <div class="p-4 border-#e3e3e3 border-solid border-1 color-#00cc99 flex justify-between items-center">
            <div>

                <span>审核状态：</span>
                <span class="color-#ff0000">{{ auditFormatter(company.examineResult) }}</span>
                <span class="ml-5">实名状态：</span>
                <span class="color-#ff0000">{{ transformDict('realNameFlag', realnameState) }}</span>
                <span class="ml-5">认证来源：</span>
                <span class="color-#ff0000">企业pc</span>
                <span class="ml-5">认证方式：</span>
                <span>证件认证</span>
            </div>

            <el-button type="primary" @click="submit">提交</el-button>
        </div>

        <div class="mt-5">
            <el-card header="企业基本信息">
                <h4 class="font-bold">营业执照</h4>
                <div class="p-4 border-#e3e3e3 border-solid border-1">

                    <div class="flex">
                        <div class="grow-1">
                            <el-image style="width: 200px; height: 200px" :src="license.fileUrl" fit="cover"
                                alt="营业执照图片" :preview-src-list="[license.fileUrl]" />
                        </div>
                        <div class="w-[80%]">
                            <el-descriptions class="margin-top" label-width="150px" :column="2" size="large" border>
                                <el-descriptions-item align="center" label="企业名称">{{ company.enterpriseName
                                    }}</el-descriptions-item>
                                <el-descriptions-item align="center" label="统一社会信用代码">{{ company.creditCode
                                    }}</el-descriptions-item>
                                <el-descriptions-item align="center" label="注册所在区域" :span="2">
                                    {{ company.areaName }}/{{ company.cityName }}/{{ company.areaName }}
                                </el-descriptions-item>
                                <el-descriptions-item align="center" label="注册详细地址" :span="2">
                                    {{ company.legalAddress }}
                                </el-descriptions-item>
                                <el-descriptions-item align="center" label="经营所在区域" :span="2">
                                    {{ company.corrProvinceSiteName }}/{{ company.corrCitySiteName }}/{{
                                        company.corrAreaSiteName }}
                                </el-descriptions-item>
                                <el-descriptions-item align="center" label="经营详细地址" :span="2">
                                    {{ company.corrAddress }}
                                </el-descriptions-item>
                                <el-descriptions-item align="center" label="经营范围" :span="2">
                                    {{ company.businessScope }}
                                </el-descriptions-item>
                                <el-descriptions-item align="center" label="营业期限" :span="2">
                                    {{ company.businessTermType == 1 ? '长期' : '短期' }} <span class="ml-5"
                                        v-if="company.businessTermType == 2">{{ company.businessTermStart }} - {{
                                            company.businessTermEnd }}</span>
                                </el-descriptions-item>
                            </el-descriptions>

                            <el-form class="mt-6">
                                <el-form-item label="审核结果" label-position="top">
                                    <el-radio-group v-model="licenseAuthFlag">
                                        <el-radio label="1">审核通过</el-radio>
                                        <el-radio label="0">审核拒绝</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="审核拒绝原因" v-show="licenseAuthFlag == '0'" label-position="top">
                                    <el-input v-model="licenseAuthRefuseReason" class="w-200" placeholder="请输入拒绝原因"
                                        type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" />
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>

                <div>
                    <h4 class="font-bold">法人证件</h4>
                    <div class="p-4 border-#e3e3e3 border-solid border-1">
                        <div class="flex">
                            <div class="grow-1">
                                <el-image style="width: 200px; height: 120px" :src="idCardFront.fileUrl" alt="营业执照图片"
                                    fit="cover" :preview-src-list="[idCardFront.fileUrl]" />
                                <el-image style="width: 200px; height: 120px" :src="idCardBack.fileUrl" alt="营业执照图片"
                                    fit="cover" :preview-src-list="[idCardBack.fileUrl]" />
                            </div>
                            <div class="w-[80%]">
                                <el-descriptions class="margin-top" label-width="200px" :column="2" size="large" border>
                                    <el-descriptions-item align="center" label="证件类型">居民身份证</el-descriptions-item>
                                    <el-descriptions-item align="center" label="姓名">{{ company.legal.name
                                    }}</el-descriptions-item>
                                    <el-descriptions-item align="center" label="证件号码" :span="2">{{ company.legal.idCard
                                    }}</el-descriptions-item>
                                    <el-descriptions-item align="center" label="有效期限（止）" :span="2">
                                        {{ company.legal.termType == '1' ? '长期' : '短期' }}
                                        <span v-if="company.legal.termType == '2'">{{ company.legal.cardBeginDate }}-{{
                                            company.legal.cardEndDate }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item align="center" label="手机号码" :span="2">{{ company.legal.mobile
                                    }}</el-descriptions-item>
                                </el-descriptions>

                                <el-form class="mt-6">
                                    <el-form-item label="审核结果" label-position="top">
                                        <el-radio-group v-model="legalAuthFlag">
                                            <el-radio label="1">审核通过</el-radio>
                                            <el-radio label="0">审核拒绝</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="审核拒绝原因" v-show="legalAuthFlag == '0'" label-position="top">
                                        <el-input class="w-200" v-model="legalAuthRefuseReason" placeholder="请输入拒绝原因"
                                            type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" />
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="!!company.operator">
                    <h4 class="font-bold">经办人证件</h4>
                    <div class="p-4 border-#e3e3e3 border-solid border-1">
                        <div class="flex">
                            <div class="grow-1">
                                <el-image style="width: 200px; height: 120px" :src="agentIdCardFront.fileUrl"
                                    alt="营业执照图片" fit="cover" :preview-src-list="[agentIdCardFront.fileUrl]" />
                                <el-image style="width: 200px; height: 120px" :src="agentIdCardBack.fileUrl"
                                    alt="营业执照图片" fit="cover" :preview-src-list="[agentIdCardBack.fileUrl]" />
                            </div>
                            <div class="w-[80%]">
                                <el-descriptions class="margin-top" label-width="200px" :column="2" size="large" border>
                                    <el-descriptions-item align="center" label="证件类型">居民身份证</el-descriptions-item>
                                    <el-descriptions-item align="center" label="姓名">{{ company.operator.name
                                        }}</el-descriptions-item>
                                    <el-descriptions-item align="center" label="证件号码" :span="2">{{
                                        company.operator.idCard
                                        }}</el-descriptions-item>
                                    <el-descriptions-item align="center" label="有效期限（止）" :span="2">
                                        {{ company.operator.termType == '1' ? '长期' : '短期' }}
                                        <span v-if="company.operator.termType == '2'">{{ company.operator.cardBeginDate
                                            }}-{{
                                                company.operator.cardEndDate }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item align="center" label="手机号码" :span="2">{{
                                        company.operator.mobile
                                        }}</el-descriptions-item>
                                </el-descriptions>

                                <el-form class="mt-6">
                                    <el-form-item label="审核结果" label-position="top">
                                        <el-radio-group v-model="agentAuthFlag">
                                            <el-radio label="1">审核通过</el-radio>
                                            <el-radio label="0">审核拒绝</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="审核拒绝原因" v-show="agentAuthFlag == '0'" label-position="top">
                                        <el-input class="w-200" v-model="agentAuthRefuseReason" placeholder="请输入拒绝原因"
                                            type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" />
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="shouquanshu.length > 0">
                    <h4 class="font-bold">授权委托书</h4>
                    <div class="p-4 border-#e3e3e3 border-solid border-1">
                        <div class="flex">
                            <div>
                                <el-image v-for="item in shouquanshu" style="width: 200px; height: 200px"
                                    :src="item.fileUrl" :key="item.id" fit="cover" alt="营业执照图片"
                                    :preview-src-list="[item.fileUrl]" />
                            </div>
                            <div class="ml-10">
                                <el-form class="mt-6">
                                    <el-form-item label="审核结果" label-position="top">
                                        <el-radio-group v-model="shouquanAuthFlag">
                                            <el-radio label="1">审核通过</el-radio>
                                            <el-radio label="0">审核拒绝</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="审核拒绝原因" v-show="shouquanAuthFlag == '0'" label-position="top">
                                        <el-input class="w-200" v-model="shouquanAuthRefuseReason" placeholder="请输入拒绝原因"
                                            type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" />
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
import { listEnterprise, getEnterpriseMore, auditEnterpriseInfo, addEnterpriseProgress, addEnterprise, updateEnterprise } from "@/api/manage/enterprise"
import { listCase } from "@/api/manage/file"
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { getDicts } from '../../../api/system/dict/data';
import { useDict, transformDict } from '../../../hooks/dict';
useDict('realNameFlag')

const auditStatusOptions = ref([])

const auditFormatter = (val) => {
    return auditStatusOptions.value.find(f => f.dictValue == val)?.dictLabel
}
const realnameState = ref("")
onMounted(() => {
    getDicts('auditStatus').then(response => {
        auditStatusOptions.value = response.data
    })
    listCase({ enterpriseId: route.query.id }).then(response => {
        caseList.value = response.rows
    })
    getEnterpriseMore(route.query.id).then(response => {
        Object.assign(company, response.data)
        realnameState.value = company.realNameFlag
    })
})
// 营业执照
const license = computed(() => {
    return caseList.value.find(f => f.fileType == '1') || {}
})
// 身份证字面
// ID card front page of the agent
const agentIdCardFront = computed(() => {
    return caseList.value.find(f => f.fileType == '2') || {}
})
// ID card back page of the agent
const agentIdCardBack = computed(() => {
    return caseList.value.find(f => f.fileType == '3') || {}
})
// 身份证字面
const idCardFront = computed(() => {
    return caseList.value.find(f => f.fileType == '4') || {}
})
// 身份证徽章页
const idCardBack = computed(() => {
    return caseList.value.find(f => f.fileType == '5') || {}
})
// 授权书
const shouquanshu = computed(() => {
    return caseList.value.filter(f => f.fileType == '6') || {}
})

/**
 *  审核结果
 */
// 法人
const legalAuthFlag = ref('1')
const legalAuthRefuseReason = ref('')

/**
 *  Agent audit result
 */
const agentAuthFlag = ref('1')
const agentAuthRefuseReason = ref('')
// 授权书
const shouquanAuthFlag = ref('1')
const shouquanAuthRefuseReason = ref('')
// 营业执照
const licenseAuthFlag = ref('1')
const licenseAuthRefuseReason = ref('')

const router = useRouter()

function submit() {
    let progressState = ''
    let examineResult = '1'

    if (shouquanAuthFlag.value == '0') {
        progressState = `授权书审核不通过(${shouquanAuthRefuseReason.value})`
    }
    if (legalAuthFlag.value == '0') {
        progressState = `法人审核不通过(${legalAuthRefuseReason.value})`
        company.legalaAuthFlag = '2'
    }
    if (licenseAuthFlag.value == '0') {
        progressState = `营业执照审核不通过(${licenseAuthRefuseReason.value})`
    }
    if (agentAuthFlag.value == '0') {
        progressState = `经办人审核不通过(${agentAuthRefuseReason.value})`
    }
    // 实名认证已认证
    if (legalAuthFlag.value == '1' && licenseAuthFlag.value == '1') {
        progressState = `实名认证成功`
        company.realNameFlag = '1'
    }
    if (legalAuthFlag.value == '1' && shouquanAuthFlag.value == '1' && licenseAuthFlag.value == '1') {
        if (!!company.operator) {
            if (agentAuthFlag.value == '1') {
                progressState = '审核通过'
                examineResult = '2'
            }
        } else {
            progressState = '审核通过'
            examineResult = '2'
        }
    }

    const data = {
        progressState,
        enterpriseId: route.query.id,
        creditCode: company.creditCode,
    }

    addEnterpriseProgress(data).then(response => {
        auditEnterpriseInfo({
            id: route.query.id,
            examineResult,
            realNameFlag: company.realNameFlag,
            legalaAuthFlag: company.legalaAuthFlag,

        }).then(() => {
            ElMessage.success('审核成功')
            router.push({
                path: '/platform/jrfu/enterprise'
            })
        })
    })

}


const caseList = ref([])

const company = reactive({
    enterpriseName: '',
    creditCode: '',
    areaName: '',
    cityName: '',
    provinceName: '',
    legalAddress: '',
    legal: {

    },
    corrProvinceSiteName: '',
    corrCitySiteName: '',
    corrAreaSiteName: '',
    corrAddress: '',
    businessScope: '',
    businessTermType: '',
    businessTermStart: '',
    businessTermEnd: '',
    registrationDate: ''
})
</script>